<template>
  <div class="wik-table-feature" v-if="columns.length">
    <Tools v-if="options.searchSetting?.show">
      <template #tool-right>
        <slot name="tool-right"></slot>
      </template>
    </Tools>
    <div class="wik-table-feature-inner">
      <Table @row-click="rowClickHandler">
        <template v-for="slot in Object.keys(slots).filter(item => !['tool-right'].includes(item))" #[slot]="scope">
          <slot :name="slot" v-bind="scope"></slot>
        </template>
      </Table>
    </div>

    <PaginationView
      v-if="pagination"
      v-model:page-size="pagination.pageSize"
      v-model:current-page="pagination.currentPage"
      :total="pagination.total"
    />
  </div>
</template>
<script lang="ts" setup>
import { provide, defineEmits, computed, useSlots, watchEffect } from "vue";
import { TableProps, TableOptions, Pagination } from "@table/interface";

import Tools from "@table/components/Tools/index.vue";
import PaginationView from "@table/components/Pagination/index.vue";
import Table from "@table/components/Table/index.vue";

//import { useData } from "@table/hooks/useData";
import { mergeDefaults } from "@table/utils";
import { optionsDefault } from "@table/constant";
import { global } from "@table/utils/global";
import { EventBus } from "@table/utils";

// 变量
const eventBus = new EventBus();
const slots = useSlots();
let {
  originalTableColumns,
  options: originalOptions,
  tableData,
  tableColumns,
  searchOptions,
  doms,
  tableScrollRef,
  api,
  afterApiTransformData
} = global();

const pagination = defineModel<Pagination>("pagination", { type: Object, default: null });

// props传值
const props = withDefaults(defineProps<TableProps>(), {
  columns: () => [],
  customContentLayout: () => [],
  options: () => {
    return optionsDefault;
  }
});
// computed
const options = computed<TableOptions>(() => {
  return mergeDefaults(props.options, optionsDefault);
});
if (props?.api) {
  api = props?.api;
}
if (props?.afterApiTransformData) {
  afterApiTransformData = props?.afterApiTransformData;
}
watchEffect(() => {
  originalTableColumns.value = props.columns;
  if (props.data) {
    tableData.value = props.data.map((item, index) => {
      item.dataIndex = index + 1;
      return item;
    });
  }

  originalOptions.value = options.value;
});
// 注入
provide("customContentLayout", props.customContentLayout);
// provide("options", props.options);
provide("pagination", pagination);

provide("tableData", tableData);
provide("originalTableColumns", originalTableColumns);
provide("options", originalOptions);
provide("tableColumns", tableColumns);
provide("searchOptions", searchOptions);
provide("doms", doms);
provide("tableScrollRef", tableScrollRef);
provide("eventBus", eventBus);
provide("api", api);
provide("afterApiTransformData", afterApiTransformData);

// definedEmits
const emits = defineEmits(["rowClick"]);
// 方法
const rowClickHandler = (val: any) => {
  emits("rowClick", val);
};

defineExpose({
  refresh: () => {
    eventBus.emit("refresh");
  }
});
</script>
<style lang="scss">
i {
  font-style: normal;
}
s {
  text-decoration: none;
}
.wik-table-feature {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  .wik-tools {
    flex: 0 0 48px;
    border-radius: 6px;
  }
  .wik-pagination {
    flex: 0 0 48px;
  }
  &-inner {
    flex: 1;
    display: flex;
    flex-flow: column nowrap;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 6px;
    min-height: 0;
    .wik-table {
      flex: 1;
    }
  }
}
</style>
